<template>
	<view class="container">
		<custom-header show-bg-color/>
		<view class="layout">
			<view class="title-container">
				<view class="top">
					<view class="title">鲸采文案</view>
					<view class="card-exchange" @click="goVip()">
						<image class="icon" src="/static/images/icon_card_exchange.png"></image>
						<text class="text">卡密兑换</text>
					</view>
				</view>
				<view class="desc">短视频下载/文案转写/配音</view>
			</view>
			<view class="primary-fun-list">
				<view @click="urlFn('/pages/extract_text/extract_text?pageFrom=index&type=text')">
					<main-fun-item title="链接转文字" desc="支持抖音/小红书/哔哩哔哩/快手等主流短视链接提取文字" icon="/static/images/icon_fun_text.png" />
				</view>
				<view @click="urlFn('/pages/extract_text/extract_text?pageFrom=index&type=video')">
					<main-fun-item title="短视频下载" desc="支持抖音/小红书/快手等主流短视频链接直接下载保存" icon="/static/images/icon_fun_video.png" />
				</view>
				<view @click="urlFn('/pages/extract_local/extract_local?pageFrom=index')">
					<main-fun-item title="本地提取文案" desc="支持上传本地音视频文件转写文案" icon="/static/images/icon_fun_location.png" />
				</view>
				<view @click="developingFn()">
					<main-fun-item title="文案配音" desc="AI大模型文案配音，多音色可选择，极速生成音频文件" icon="/static/images/icon_fun_ocr.png" />
				</view>
			</view>
			<view class="extend-fun-container">
				<view class="title">其他功能</view>
				<view class="fun-list">
					<view class="fun-item" @click="developingFn()">
						<image src="/static/images/icon_extend_fun_mind.png" mode="aspectFill" class="icon"></image>
						<view class="text">生成思维导图</view>
					</view>				
					<view class="fun-item" @click="developingFn()">
						<image src="/static/images/icon_extend_fun_copywriting.png" mode="aspectFill" class="icon"></image>
						<view class="text">文案润色</view>
					</view>
					<view class="fun-item" @click="developingFn()">
						<image src="/static/images/icon_extend_fun_script.png" mode="aspectFill" class="icon"></image>
						<view class="text">短视频脚本</view>
					</view>
					<view class="fun-item" @click="developingFn()">
						<image src="/static/images/icon_extend_fun_translate.png" mode="aspectFill" class="icon"></image>
						<view class="text">短视频字幕提取</view>
					</view>
				</view>
			</view>
		</view>
		<image src="/static/images/top_header_bg.png" class="top-bg" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	
	const isLogin = ref(false);
	
	onShow(() => {
		const cacheUserInfo = uni.getStorageSync("userInfo");
		if (cacheUserInfo) {
			isLogin.value = true;
		} else {
			isLogin.value = false;
		}
	});
	
	const urlFn = (url) => {
		if (!isLogin.value) {
			uni.showModal({
				content: '请先登录',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						uni.switchTab({
						  url: '/pages/mine/mine'
						})
					}
				}
			})
		} else {
			uni.navigateTo({
			  url,
			})
		}
	};
	
	const developingFn = () => {
		uni.showToast({
			title: '敬请期待！',
			icon: 'none',
			duration: 2000,
		})
	};
	
	const goVip = () => {
		uni.switchTab({
		  url: '/pages/mine/mine'  // 目标TabBar页面的路径
		});
	};
	
	// 分享好友
	onShareAppMessage(() => {
		console.log('分享好友');
		return {
			title: '鲸采文案',
			path: '/pages/index/index',
			success() {
				console.log('分享成功')
			}
		}
	});
	
	// 分享朋友圈
	onShareTimeline(() => {
		console.log('分享朋友圈');
		return {
			title: '鲸采文案',
			path: '/pages/index/index',
			success() {
				console.log('分享成功')
			}
		}
	});
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.top-bg {
			width: 314rpx;
			height: 451rpx;
			position: absolute;
			top: 0;
			right: 0;
		}
		.layout {
			background: linear-gradient(180deg, #0051FE 0%, rgba(0,81,254,0) 100%);
			height: 100vh;
			overflow: auto;
			padding-bottom: 32rpx;
			margin-top: -1rpx;
			.title-container {
				margin-top: 42rpx;
				color: white;
				display: flex;
				flex-direction: column;
				padding-left: 48rpx;
				.top {
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title {
						font-size: 64rpx;
						font-weight: 800;
					}
					.card-exchange {
						z-index: 10;
						width: 200rpx;
						height: 64rpx;
						background: linear-gradient( 132deg, #323232 0%, #232323 100%);
						border-radius: 32rpx 0rpx 0rpx 32rpx;
						display: flex;
						align-items: center;
						padding-left: 26rpx;
						box-sizing: border-box;
						
						.icon {
							margin-top: 8rpx;
							width: 39rpx;
							height: 36rpx;
						}
						.text {
							font-size: 26rpx;
							font-weight: 400;
							margin-left: 7rpx;
						}
					}
				}
				.desc {
					margin-top: 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 24rpx;
				}
			}
			.primary-fun-list {
				margin-top: 64rpx;
				padding: 0 48rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 28rpx;
				z-index: 10;
			}
			.extend-fun-container {
				display: flex;
				flex-direction: column;
				margin-top: 48rpx;
				padding: 0 48rpx;
				.title {
					color: #666666;
					font-size: 24rpx;
					font-weight: 500;
					line-height: 24rpx;
					text-align: center;
				}
				.fun-list {
					width: 100%;
					height: 170rpx;
					margin-top: 27rpx;
					background-color: white;
					box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(132,148,183,0.12);
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.fun-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						gap: 18rpx;
						.icon {
							width: 64rpx;
							height: 64rpx;
						}
						.text {
							font-size: 24rpx;
							line-height: 24rpx;
							color: #666666;
							font-weight: 400;
						}
					}
				}
			}
		}
	}
</style>

